<form [formGroup]="formGroup" class="form-group edit-form">
  <div class="content-block">
    <span class="category-title" [translate]="'SPELL_DBC.ITEMS.GENERAL'"></span>
    <div class="row">
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="EquippedItemClass">EquippedItemClass</label>
        <keira-single-value-selector-btn
          [control]="formGroup.controls.EquippedItemClass"
          [disabled]="formGroup.controls.EquippedItemClass.disabled"
          [config]="{ options: ITEM_CLASS, name: 'EquippedItemClass' }"
          [modalClass]="'modal-md'"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.ITEMS.EQUIPPED_ITEM_CLASS' | translate"></i>
        <input [formControlName]="'EquippedItemClass'" id="EquippedItemClass" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="EquippedItemSubclass">EquippedItemSubclass</label>
        @if (
          formGroup.controls.EquippedItemClass &&
          formGroup.controls.EquippedItemClass.value !== null &&
          formGroup.controls.EquippedItemClass.value >= 0 &&
          formGroup.controls.EquippedItemClass.value < SPELL_DBC_ITEM_SUBCLASS.length
        ) {
          <keira-flags-selector-btn
            [control]="formGroup.controls.EquippedItemSubclass"
            [disabled]="formGroup.controls.EquippedItemSubclass.disabled"
            [config]="{ flags: SPELL_DBC_ITEM_SUBCLASS[formGroup.controls.EquippedItemClass.value], name: 'EquippedItemSubclass' }"
            [modalClass]="'modal-md'"
          />
        }
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.ITEMS.EQUIPPED_ITEM_SUBCLASS' | translate"></i>
        <input [formControlName]="'EquippedItemSubclass'" id="EquippedItemSubclass" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="EquippedItemInvTypes">EquippedItemInvTypes</label>
        <keira-flags-selector-btn
          [control]="formGroup.controls.EquippedItemInvTypes"
          [disabled]="formGroup.controls.EquippedItemInvTypes.disabled"
          [config]="{ flags: SPELL_DBC_INVENTORY_TYPE, name: 'EquippedItemInvTypes' }"
          [modalClass]="'modal-md'"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.ITEMS.EQUIPPED_ITEM_INV_TYPES' | translate"></i>
        <input [formControlName]="'EquippedItemInvTypes'" id="EquippedItemInvTypes" type="number" class="form-control form-control-sm" />
      </div>
    </div>
  </div>
  <div class="content-block">
    <span class="category-title" [translate]="'SPELL_DBC.ITEMS.NON_CONSUMABLE_ITEMS'"></span>
    <div class="row">
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="Totem_1">Totem_1</label>
        <keira-item-selector-btn
          [control]="formGroup.controls.Totem_1"
          [disabled]="formGroup.controls.Totem_1.disabled"
          [config]="{ name: 'Totem_1' }"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.ITEMS.TOTEM_1' | translate"></i>
        <input [formControlName]="'Totem_1'" id="Totem_1" type="number" class="form-control form-control-sm" />
      </div>

      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="Totem_2">Totem_2</label>
        <keira-item-selector-btn
          [control]="formGroup.controls.Totem_2"
          [disabled]="formGroup.controls.Totem_2.disabled"
          [config]="{ name: 'Totem_2' }"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.ITEMS.TOTEM_2' | translate"></i>
        <input [formControlName]="'Totem_2'" id="Totem_2" type="number" class="form-control form-control-sm" />
      </div>
    </div>
    <div class="row">
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="RequiredTotemCategoryID_1">RequiredTotemCategoryID_1</label>
        <keira-single-value-selector-btn
          [control]="formGroup.controls.RequiredTotemCategoryID_1"
          [disabled]="formGroup.controls.RequiredTotemCategoryID_1.disabled"
          [config]="{ options: TOTEM_CATEGORY, name: 'RequiredTotemCategoryID_1' }"
          [modalClass]="'modal-md'"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.ITEMS.REQUIRED_TOTEM_CATEGORY_ID_1' | translate"></i>
        <input
          [formControlName]="'RequiredTotemCategoryID_1'"
          id="RequiredTotemCategoryID_1"
          type="number"
          class="form-control form-control-sm"
        />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="RequiredTotemCategoryID_2">RequiredTotemCategoryID_2</label>
        <keira-single-value-selector-btn
          [control]="formGroup.controls.RequiredTotemCategoryID_2"
          [disabled]="formGroup.controls.RequiredTotemCategoryID_2.disabled"
          [config]="{ options: TOTEM_CATEGORY, name: 'RequiredTotemCategoryID_2' }"
          [modalClass]="'modal-md'"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.ITEMS.REQUIRED_TOTEM_CATEGORY_ID_2' | translate"></i>
        <input
          [formControlName]="'RequiredTotemCategoryID_2'"
          id="RequiredTotemCategoryID_2"
          type="number"
          class="form-control form-control-sm"
        />
      </div>
    </div>
  </div>
  <div class="content-block">
    <span class="category-title" [translate]="'SPELL_DBC.ITEMS.CONSUMABLE_ITEMS'"></span>
    <div class="row">
      @for (i of [1, 2, 3, 4, 5, 6, 7, 8]; track i) {
        <div class="row">
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" [for]="'Reagent_' + i">Reagent_{{ i }}</label>
            <keira-item-selector-btn
              [control]="formGroup.controls['Reagent_' + i]"
              [disabled]="formGroup.controls['Reagent_' + i].disabled"
              [config]="{ name: 'Reagent_' + i }"
            />
            <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.ITEMS.REAGENT' | translate"></i>
            <input [formControlName]="'Reagent_' + i" [id]="'Reagent_' + i" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" [for]="'ReagentCount_' + i">ReagentCount_{{ i }}</label>
            <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.ITEMS.REAGENT_COUNT' | translate"></i>
            <input [formControlName]="'ReagentCount_' + i" [id]="'ReagentCount_' + i" type="number" class="form-control form-control-sm" />
          </div>
        </div>
      }
    </div>
  </div>
</form>
